<template>
	<view class="content">
		<!-- <view class="header">
			<view class="ipt-box">
				<input type="text" value="" placeholder="请输入您要找的村子名称" placeholder-class="plac-class" />
				<image src="../../../static/search1.png" mode=""></image>
			</view>
			<view class="header-right">
				<span>取消</span>
			</view>
		</view> -->
		<!-- village -->
		<view class="village-box">
			<view class="village-item" v-for="(item,index) in villageList" :key="index">
				<view class="flexs">
					<view class="village-item-left">
						<view class="shuxian"></view>
						<view class="adress">{{item.name}}{{item.township_name}}</view>
					</view>
					<view class="village-item-right" @click="bottonShow(index)">
						<view class="huhao">{{item.count}}户</view>
						<!-- <image src="../../../static/zhankai.png" mode="" v-if="index + '' == showIndex"></image>
						<image src="../../../static/xia.png" mode="" v-else></image> -->
						
					</view>
				</view>
				<!-- <view class="villPositi" v-for="(items,indexs) in item.radios" :key="indexs" v-if="index + '' == showIndex">
					<view class="">
						<label class="radio"><radio style="transform:scale(0.5)" value="items.value" @click="dadioChange(indexs)"  :checked="indexs + '' == current" />{{items.name}}</label>
					</view>
				</view> -->
			</view>
			<view class="fu" v-if="villageList.length == 0">
				您没有负责的村子
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				// array: ['安装工','检测工','维修工'],
				index: 0,
				value:'',  //搜索关键词
				installList:[],  //安装列表
				dosearch:false,
				showAcount:false,
				page:1,
				villageList:[],
				active:0,
				current: '',
				// 展开控制
				showIndex: '',
				imgFlag: false,
				token: '',
				login: ''
			};
		},
		onLoad() {

		},
		onShow() {
			uni.getStorage({
				key: 'token'
			}).then(da => {
				this.token = da[1].data
			})
			uni.getStorage({
				key: 'login'
			}).then(da => {
				this.login = da[1].data
			})
			setTimeout(() => {
				this.getTown()
			},10)
		},
		methods: {
			bottonShow(index) {
				if(this.showIndex == index + '') {
					this.showIndex = null
				}else{
					this.showIndex = index + ''
				}
			},
			dadioChange(index) {
				console.log(index + '')
				this.current = index + ''
			},
			// 获取安装数据
			getTown() {
				let that = this
				let loginUrl = ''
				if(that.login == '安全员') {
					loginUrl = 'safer/my_villages'
				}
				if(that.login == '协管员') {
					loginUrl = 'assistant/my_villages'
				}
				that.$request.request({
					url: loginUrl,
					method:'POST',
					data: {
						token: that.token
					}
				}).then(res => {
					if(res.data.code == 1) {
						that.villageList = res.data.data
					}
					console.log(that.villageList)
				})
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	.uni-radio{
		background-color: #ccc !important;
		.uni-radio-wrapper{
			background-color: #ccc !important;
			.uni-radio-input .uni-radio-input-checked{
				background-color: #ccc !important;
			}
		}
	}
	.fu{
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		color: #999;
		font-size: 32upx;
	}
	page{
		background-color: #F5F5F5;
		// padding-bottom: 200upx;
		// margin-bottom: 150upx;
	}
	.content{
		padding-bottom: 140upx;
	}
	.header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		height: 80upx;
		width: 100%;
		background-color: #003690;
		padding: 0 40upx;
		.ipt-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 0 20upx;
			width: 514upx;
			height: 52upx;
			background-color: #fff;
			border-radius: 24upx;
			image{
				width: 32upx;
				height: 32upx;
			}
		}
		.header-right{
			display: flex;
			align-items: center;
			font-size: 32upx;
			color: #E2ECFB;
			image{
				width: 36upx;
				height: 36upx;
			}
		}
	}
	.test-code:active{
		background: rgba(69, 82, 202, 0.4);
		color: #fff;
	}
	.plac-class{
		font-size: 32upx;
		color: #999;
	}
	// nav
	.nav{
		width: 100%;
		height: 80upx;
		background-color: #fff;
		.nav-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 50%;
			margin: 0 auto;
			line-height: 76upx;
			span{
				padding: 0 10upx;
				font-size: 32upx;
				color: #333;
				border-bottom: 4upx solid transparent;
			}
			.current{
				color: #003690;
				border-bottom: 4upx solid #003690;
			}
		}
	}
	// danger
	.village-item{
		position: relative;
		// display: flex;
		// justify-content: space-between;
		// align-items: center;
		box-sizing: border-box;
		width: 690upx;
		padding:20upx 30upx;
		// background-color: #fff;
		// border-radius: 10upx;
		margin: 6upx auto 0;
		
		// box-shadow:0px 3px 4px rgba(0,30,57,0.15);
		.flexs{
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2upx solid #ccc;
			height: 70upx;
			.village-item-left{
				display: flex;
				align-items: center;
				.shuxian{
					width: 8upx;
					height: 28upx;
					background-color: #003690;
					border-radius: 8upx;
					margin-right: 20upx;
				}
				.adress{
					font-size: 32upx;
					color: #333;
				}
			}
		}
		.villPositi{
			// .uni-radio-wrapper .uni-radio .uni-radio-input .uni-radio-input-checked {
			// 	width: 20upx !important;
			// 	height: 20upx !important;
			// 	position: none;
			// }
			// .input[type = "radio"] {
			// display: none !important;
			// }
			// .uni-radio-wrapper{
			// 	.uni-radio{
			// 		.uni-radio-inpu{
			// 			.uni-radio-input-checked{
			// 					width: 20upx !important;
			// 					height: 20upx !important;
			// 					position: none;
			// 			}
			// 		}
			// 	}
			// }
		}
		.village-item-right{
			display: flex;
			align-items: center;
			.huhao{
				font-size: 28upx;
				color: #999;
			}
			image{
				width: 36upx;
				height: 36upx;
			}
		}
	}
</style>
